<template>
  <div class="   pt-16  min-h-screen w-full bg-white">
       <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />

      <div class="alert alert-warning" v-if="showType=='error'" style="border-radius: inherit;background-color: inherit;max-width: 500px;margin: 0 auto;margin-top: 40px;">
        <div class="flex-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 mx-2 stroke-current"> 
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>                         
            </svg> 
            <label>
                
               The reset code received was incorrect. Please try again, or <a class=" text-success" href="/reset"> request a new reset code.</a>
            </label>
        </div>
      </div>
       <div class="alert alert-success" style="border-radius: inherit;background-color: inherit;max-width: 500px;margin: 0 auto;margin-top: 40px;" v-if="showType=='success'" >
        <div class="flex-1">
           <svg t="1644037441539" class="w-6 h-6 mx-2 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18904" width="200" height="200"><path d="M512 0C228.430769 0 0 228.430769 0 512s228.430769 512 512 512 512-228.430769 512-512S795.569231 0 512 0z m0 945.230769C271.753846 945.230769 78.769231 752.246154 78.769231 512S271.753846 78.769231 512 78.769231s433.230769 192.984615 433.230769 433.230769-192.984615 433.230769-433.230769 433.230769z" p-id="18905" fill="#029485"></path><path d="M716.8 330.830769l-208.738462 248.123077c-15.753846 15.753846-43.323077 19.692308-59.076923 7.876923L299.323077 472.615385c-15.753846-11.815385-43.323077-7.876923-55.138462 7.876923-11.815385 15.753846-7.876923 43.323077 7.876923 55.138461l149.661539 114.215385c19.692308 15.753846 47.261538 23.630769 74.830769 23.630769 35.446154 0 70.892308-15.753846 94.523077-43.323077l208.738462-248.123077c15.753846-15.753846 11.815385-43.323077-3.938462-55.138461-19.692308-15.753846-43.323077-15.753846-59.076923 3.938461z" p-id="18906" fill="#029485"></path></svg>
            <label>  
  Password successfully changed
 <a class=" text-warning" href="/"> Return to the home page.</a>
</label>
        </div>
      </div>

<div class="p-2 max-w-xl mx-auto" v-if="showType=='inputpwd'"  >
  <h1 class="py-5"> Update Password</h1>
        <div class="form-control">
           
          <input type="password" v-model="newPassword" placeholder="New Password" class="input input-bordered">
        </div>

         <div class="form-control mt-5">
           
          <input type="password" v-model="confirmPassword" placeholder="Confirm Password" class="input input-bordered">
        </div>


         <button @click="reset" class="group relative w-full flex justify-center p-4 mt-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          
         Reset Password
        </button>
</div>
  </div>
</template>
<script>

export default {
    data(){
        return{
            slideTpye:'small',
            newPassword:"",
            confirmPassword:"",
            pl:"pl-0" ,
            code:"",
            showType:"inputpwd"
        }
    },
     layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
   head() {
    return {
      title: this.meta.title,
      meta: [
         {
          name: 'keywords',
          content: this.meta.keywords,
        },
        {
          name: 'description',
          content:this.meta.description
        }
      ]
      }
    },
     async asyncData({params,$Data,error,redirect}) {
         let meta = await $Data.getMeta(route.path);
         let code = params.pathMatch;
         let res = await $Data.checkResetCode( code);
         let showType ="inputpwd";
         if(!res){
            showType ="error";
         }
         return {
           code,
           showType,
            meta
          
         }
          
         
     },
     methods:{
        async reset(){
        if(this.newPassword.length<6){
                     this.$tools.alert("error","The password entered is too short, please pick a different password.")
                    return; 
          }
          if(this.newPassword!=this.confirmPassword){
              this.$tools.alert("error","Passwords must match!")
              return;
          }
          let post = {
            code:this.code,
            password:this.newPassword,
          }
         let res = await  this.$axios.post("snogogo_nuxt/user/resetPwdByCode",post )
        if(res.code>0){
          this.$tools.alert("error",res.msg)
          return;
        }
         this.showType="success";

        this.$tools.alert("success", "Password successfully changed!")
        
     },

         // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0";
        }
     }
     }
}
</script>